<template>
	<navbar title="订单详情" :isBack="true"></navbar>
	<view>
		<view class="state">
			<view class="name" v-if="info.state == 1 && info.after_sales == 0">待付款</view>
			<view class="name" style="color:#E83F3F" v-if="info.state == 2 && info.after_sales == 0">待发货</view>
			<view class="name" v-if="info.state == 3 && info.after_sales == 0">待收货</view>
			<view class="name" style="color:#5A5A5A;" v-if="info.state == 4 && info.after_sales == 0">已完成</view>
			<view class="name" v-if="info.after_sales == 1">售后中</view>
			<view class="name" v-if="info.after_sales == 2">已退款</view>
			<view class="name" v-if="info.after_sales == 3">已换货</view>
		</view>
		<view class="card">
			<view class="adderss_header">
				<image class="dingwei" :src="imageUrl+'black_dingwei.png'" mode="aspectFit"></image>
				<view class="grey" style="font-size: 28rpx;">{{info.province}}{{info.city}}{{info.area}}</view>
			</view>
			<view class="addrcenter">
				<view class="msg" style="margin: 10rpx 0;font-size: 28rpx;">{{info.address}}</view>
				<!-- <image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/order/5.png" mode="widthFix"
					class="iconsr"></image> -->
			</view>
			<view class="grey" style="font-size: 28rpx;">
				<span>{{info.name}}</span>
				<span style="margin-left: 20rpx;">{{info.mobile}}</span>
			</view>
		</view>
		<view class="card">
			<view class="titles" style="font-weight: bold;">商品信息</view>
			<view class="center" style="margin: 0 -30rpx;" v-for="(item,index) in info.goods">
				<image mode="aspectFill" class="cover" :src="item.goods_cover"></image>
				<view class="shop_title">
					<view class="shop_title_top">
						<view class="shop_title_top_name shenglueh2 ellipsis-2" style="font-size: 28rpx;">
							{{item.goods_name}}
						</view>
						<view class="shop_title_top_price">{{item.goods_price}}</view>
					</view>
					<view class="shop_title_bom JSB" style="width:100%">
						{{item.specs}} <text>×{{item.num}}</text>
						<view></view>
						<view class="shop_title_bom_state" v-if="item.after_sales==1">售后中</view>
						<view class="shop_title_bom_state" v-if="item.after_sales==2">已退款</view>
						<view class="shop_title_bom_state" v-if="item.after_sales==3">已换货</view>
					</view>
				</view>
			</view>
			<view class="priceinfo">
				<view class="form">
					<view class="lable">商品金额</view>
					<view class="content">¥{{info.total_price}}</view>
				</view>
				<view  style="display: flex;align-items: center;font-size: 28upx;justify-content: space-between;">
					<view class="lable">运费</view>
					<view class="content">¥{{info.postage}}</view>
				</view>
				<!-- <view class="form">
					<view class="lable">优惠券</view>
					<view class="content">-¥{{info.coupon_price}}</view>
				</view> -->
				<!-- <view class="form" v-if="info.return_price!=0">
					<view class="lable">退款金额</view>
					<view class="content">-¥{{info.return_price}}</view>
				</view> -->
			</view>
			<!-- 待发货时展示 -->
			<view class="shipped_line" v-if="info.state > 1"></view>
			<view class="shipped" style="margin-top: 20rpx;" v-if="info.state > 1">
				<view class="pay_blck" @click="toAfterSales" >
					<span v-if="info.is_after_sales && info.order_id <= 0">申请售后 >></span>
				</view>
				<view v-if="info.state > 1" style="display: flex;align-items: center;">
					<text class="text1">实付：</text>
					<text class="textM">{{info.pay_price}}</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="titles" style="font-weight: bold;">买家留言</view>
			<view class="titles_detils shenglueh2">{{
				info.memo ? info.memo : '暂无留言'
			}}</view>
		</view>
		<!-- 	<view class="card">
			<kefu :imageUrl="imageUrl"></kefu>
		</view> -->
		<view class="card" v-if="info.state>2 && (info.delivery_no||info.logistics.length>0)" >
			<view class="titles" style="font-weight: bold;">物流信息</view>
			<view class="shipped_line"></view>
			<view class="form2" v-if="info.delivery_no">
				<view class="form2_body">
					<view class="lable2" style="color: #333333;">{{info.delivery_name}}</view>
					<view class="content2 shenglueh" style="color: #333333;">{{info.delivery_no}}</view>
					<image class="copybtn2" :src="imageUrl+'copy.png'" @tap="copy(info.delivery_no)" mode="aspectFit">
					</image>
				</view>
				<view class="look_shipped" @click="seeDelivery()">查看物流 ></view>
			</view>
			<view v-if="info.logistics.length>0">
				<view class="form2" v-for="(item,index) in info.logistics" :key="index">
					<view class="form2_body">
						<view class="lable2" style="color: #333333;">{{item.delivery_name}}</view>
						<view class="content2 shenglueh" style="color: #333333;">{{item.delivery_no}}</view>
						<image class="copybtn2" :src="imageUrl+'copy.png'" @tap="copy(item.delivery_no)"
							mode="aspectFit">
						</image>
					</view>
					<view class="look_shipped" @click="seeDeliveryC(item)">查看物流 ></view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="titles" style="font-weight: bold;">订单信息</view>
			<view class="form1">
				<view class="lable">订单编号</view>
				<view class="content shenglueh">{{info.order_no}}</view>
				<image class="copybtn2" :src="imageUrl+'copy.png'" @tap="copy(info.order_no)" mode="aspectFit"></image>
			</view>
			<view class="form1">
				<view class="lable">下单时间</view>
				<view class="content shenglueh">{{info.create_time}}</view>
			</view>
			<view class="form1" v-if="info.pay_time">
				<view class="lable">支付时间</view>
				<view class="content shenglueh">{{info.pay_time}}</view>
			</view>
			<view class="form1" v-if="info.pay_style">
				<view class="lable">支付方式</view>
				<view class="content shenglueh">微信支付</view>
			</view>
			<view class="form1" v-if="info.delivery_time">
				<view class="lable">发货时间</view>
				<view class="content shenglueh">{{info.delivery_time}}</view>
			</view>
			<view class="form1" v-if="info.collect_time">
				<view class="lable">收货时间</view>
				<view class="content shenglueh">{{info.collect_time}}</view>
			</view>
		</view>
		<view class="footline"></view>
		<view class="footer" v-if="info.state!=2">
			<view class="left" style="white-space: nowrap;display: flex;align-items: flex-end;" v-if="info.state == 1">
				<text class="nmaes">合计：</text>
				<text class="price">{{info.pay_price}}</text>
			</view>
			<view class="btns" v-if="info.state == 1" @tap="cancleOrder()">取消订单</view>
			<view class="btns active" v-if="info.state == 1" @tap="toPay()">立即支付</view>
			<view class="btns" v-if="info.state > 2&&info.delivery_no" @tap="seeDelivery()">查看物流</view>
			<view class="btns active" v-if="info.state == 3" @tap="trueOrder()">确认收货</view>
		</view>
		<!-- 物流弹窗 -->
		<u-popup v-model="delivery_model" :border-radius="50" mode="bottom" @close="delivery_model=false"
			style="position: relative;">
			<image class="chahaoC" :src="imageUrl+'colse_chooseshop.png'" mode="aspectFit"
				@click="delivery_model=false"></image>
			<logistics :logData="logData" :list="delivery_info" :imageUrl="imageUrl"></logistics>
		</u-popup>
		<!-- 售后弹窗 -->
		<u-popup v-model="afterSales" :border-radius="30" mode="bottom" @close="afterSales=false"
			style="position: relative;">
			<image class="chahaoC" :src="imageUrl+'colse_chooseshop.png'" mode="aspectFit" @click="afterSales=false">
			</image>
			<after-salesd :listData="listData" :imageUrl="imageUrl"  ref="salesChild"></after-salesd>
		</u-popup>

	</view>

</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue'

	import logistics from "@/pagesB/mine/mineStudent/logistics.vue"
	import afterSalesd from "@/components/popup/afterSales.vue"
	import { shopOrderInfo, shopOrderLogistics, shopCancelOrder, shopMoreOrderLogistics,shopReceiving } from '@/service/api/shop'
	import tools from '@/utils/tools'
import { nextTick } from 'process'
	const info = reactive({
		id: "",
		province: "",
		city: '',
		area: "",
		address: "",
		name: "",
		mobile: "",
		goods: [
			{
				goods_cover: "",
				goods_name: "",
				goods_price: "",
				specs: "",
				num: "",
				after_sales: 0,

			}
		],
		total_price: "",
		postage: "",
		return_price: "",
		state: "",
		is_after_sales: "",
		pay_price: "",
		memo: "",
		delivery_no: "",
		logistics: [],
		delivery_name: '',
		order_no: "",
		create_time: "",
		pay_time: "",
		pay_style: "",
		delivery_time: "",
		collect_time: "",
		after_sales: 0
	})
	const logData = reactive({
		delivery_no: "",
		address: ""
	})
 
	const delivery_model = ref(false)//物流弹窗
	const imageUrl = ref('https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/')
	const afterSales = ref(false)//售后弹窗
	const delivery_info = ref([])
	const id = ref()
	const listData = ref({
		goods: [
			{
				checked: false,
				choose: "",
				goods_cover: "",
				goods_name: "",
				goods_price: "",
				specs: "",
				num: "",
				after_sales: 0,

			}
		],
		id:""
	})//售后数组
	onLoad((opt) => {
		id.value = opt.id;
		getData()
	})
	const getData = async () => {
		const res = await shopOrderInfo({ id: id.value });
		for (let i in info) {
			info[i] = res.msg[i]
		}
		listData.value.goods = info.goods as any;
			listData.value.id = info.id as any;
			
		console.log(info);
	}
	//确认收货
	const trueOrder = async()=>{
		const res = await shopReceiving({id:info.id});
		tools.showToast(res.msg);
		setTimeout(()=>{
			getData()
		},500)
	}
	//售后选中事件
	const choose = (v) => {

	}
	//申请售后
	const toAfterSales = () => {

		afterSales.value = true
	}
	//查看物流
	const seeDelivery = async () => {

		const res = await shopOrderLogistics({ id: info.id })
		logData.delivery_no = res.msg.delivery_no;
		logData.address = res.msg.province + res.msg.city + res.msg.area + res.msg.address;
		delivery_info.value = res.msg.logistics_data.list;
		nextTick(()=>{
			delivery_model.value = true;
		})
		
	}
	//查看更多包裹物流
	const seeDeliveryC = async (item : any) => {
		const res = await shopMoreOrderLogistics({ id: item.id });
		logData.delivery_no = res.msg.delivery_no;
		logData.address = res.msg.province + res.msg.city + res.msg.area + res.msg.address;
		delivery_info.value = res.msg.logistics_data.list;
		nextTick(()=>{
			delivery_model.value = true;
		})
	}
	//取消订单
	const cancleOrder = async () => {
		const res = await shopCancelOrder({ id: id.value })
		if (res.code == 1) {
			setTimeout(() => {
				tools.navTo('', 2)
			}, 500)
		}
		tools.showToast(res.msg)
	}
	//复制
	const copy = (v) => {
		tools.setClipboardData(v);
	}
	//去支付
	const toPay = () => {
		tools.navTo('/pagesB/order/pay?id=' + info.id + '&type=3')
	}
</script>

<style scoped lang="scss">
	@import '../../static/css/pagesB/goodsDetail.scss';

	.chahaoC {
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		top: 30rpx;
		right: 30rpx;
		z-index: 22;
	}

	.ellipsis-2 {
		// 注意，不要设置此标签的高度，下方代码设置了行数，会自动根据行数进行计算高度的。

		//文本超出部分以...形式展示
		text-overflow: -o-ellipsis-lastline;
		//整体超出部分隐藏
		overflow: hidden;
		//文本超出部分以...形式展示，同第一行样式代码
		text-overflow: ellipsis;
		//display 块级元素展示
		display: -webkit-box;
		//设置文本行数为2行
		-webkit-line-clamp: 2;
		//设置文本行数为2行
		line-clamp: 2;
		//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
		-webkit-box-orient: vertical;

	}
</style>
<style>
	page {
		background: #F5F6F8;
	}
</style>